<!--

@file: Carousel01.vue
@author: pan
-->
<script setup lang="ts">
defineOptions({ name: 'Carousel01.vue' })
</script>

<template>
  <div class="wrapper">
    <div class="container"></div>
  </div>
</template>

<style lang="scss" scoped>
.wrapper {
  width: 400px;
  height: 200px;
  box-sizing: border-box;
  border: 2px solid red;
  margin: 100px auto;
  /* 透视属性，使得旋转效果更符合物理直觉 */
  perspective: 800px;
}
.container {
  background-color: yellowgreen;
  width: 100%;
  height: 100%;
  /* 加入过渡效果，使得可以看到旋转的过程 */
  transition: transform ease 2s;
}
.wrapper:hover .container {
  /* 鼠标移入时旋转，盒子360°旋转就会形成半径为200px的一个圆 */
  transform: rotateY(-300deg);
}
</style>
